<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>虫害一览表</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-container" style="margin-top: 5px">

    <!--昆虫一览表-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend><h2>虫害一览</h2></legend>
    </fieldset>

    <!--引用一个table-->
    <table id="insectTable" lay-filter="insectDetail"></table>

    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-input-inline">
            <button class="layui-btn layui-btn-radius" id="btnAdd">添加虫害</button>
            <button class="layui-btn layui-btn-radius layui-btn-primary" id="btnDetail" style="box-shadow: 0 0 15px rgba(55,55,225,0.8) inset">查看虫害详情</button>
            </div>
        </div>
    </div>
    <!--开启查询-->
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset8">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>查询虫害信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label"><h3>害虫名</h3></label>
                <div class="layui-input-block">
                    <input type="text" name="insectName" placeholder="请输入害虫名" autocomplete="off" class="layui-input" id="insectName" style="padding: 15px;box-shadow: 0 0 5px rgba(0,0,0,0.5)">
                </div>
                <br>
                <label class="layui-form-label"><h3>寄主</h3></label>
                <div class="layui-input-block">
                    <input type="text" name="host" placeholder="请输入寄主名" autocomplete="off" class="layui-input" id="host" style="padding: 15px;box-shadow: 0 0 5px rgba(0,0,0,0.5)">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-icon layui-btn-radius" id="btnQuery">立即查询</button>
                </div>
            </div>
        </div>
    </div>
</div>

 </body>
<!--引入layui js-->
<script src="../layui/layui.js"></script>
<!--引入layui模块-->
<script>
layui.use(['form','table','jquery','layer'], function(){
  let form = layui.form;
  let table = layui.table;
  let $ = layui.$;
  let layer = layui.layer;
  //监听提交
  // form.on('submit(formDemo)', function(data){
  //   layer.msg(JSON.stringify(data.field));
  //   return false;
  // });
  //分页
  let t = table.render({
    id:'myTable'//两种方式重载表格
    ,elem: '#insectTable'//table模块应用到界面的哪个table上，使用的是jquery的选择器
    ,url: '/MyForestManagerSystem/is.do?method=insect_detail_page'//后台的数据接口,对于我们现在来说就是servlet的接口
    ,page:true//开启分页,可以不写。但是想分页必须写上
    ,request: {//可不写，有默认的page和limit
         pageName: 'pageNo' //页码的参数名称，默认：page
         , limitName: 'pageSize' //每页数据量的参数名，默认：limit
    }
    ,limits:[2,5,10]//显示的编辑每页显示条数
   // ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,cols:[[
        {type: 'checkbox', fixed: 'left'}
      //表头  field是后台返回json数据的字段名，title是界面显示的名字，[width:宽度], [sort: 是否开启排序true]，[fixed: 表示当前列固定在哪里'left'],
      ,{field: 'insectId', align:'center',title: '编号', width:80, sort: true, fixed: 'left'}
      ,{field: 'insectName',align:'center', title: '昆虫',width:200}
      ,{field: 'host',align:'center', title: '寄主',width:200}
      ,{field: 'danger', align:'center',title: '主要危害'}
      ,{fixed: 'right', width:200, align:'center', title: '操作',toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
    ]]
  })

    //监听头工具栏事件
    // table.on('toolbar(insectDetail)', function(obj){
    //
    //     let checkStatus = table.checkStatus(obj.config.id);
    //     let data = checkStatus.data; //获取选中的数据
    //
    //     switch(obj.event){
    //         case 'add':
    //             layer.msg('添加');
    //             break;
    //         case 'update':
    //             if(data.length === 0){
    //                 layer.msg('请选择一行');
    //             } else if(data.length > 1){
    //                 layer.msg('只能同时编辑一个');
    //             } else {
    //                 layer.alert('编辑 [id]：'+ data.insectId);
    //             }
    //             break;
    //         case 'delete':
    //             if(data.length === 0){
    //                 layer.msg('请选择一行');
    //             } else {
    //                 layer.msg('删除');
    //             }
    //             break;
    //     };
    // });

    //查询事件,重载表格
    $("#btnQuery").on('click',function () {
        t.reload({
            where:{
                insectName:$("input[name=insectName]").val(),
                host:$("#host").val()
            }
            ,page:{
                curr: 1 //查询后，重新从第 1 页开始
            }
        });
    });
    //监听工具条
   table.on('tool(insectDetail)',function (obj) {//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
       let data = obj.data; //获得当前行数据
       let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
       let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
       if (layEvent === 'detail') { //查看
            layer.open({
                type: 2 //此处以iframe举例
                , content: '/MyForestManagerSystem/home/insect_detail.html'
                , title: '害虫详情'
                , area: ['400px', '400px']//宽高
                , shade: [0.8, '#393D49']//遮罩
                //,time:5000//窗口显示时间，自动关闭所需毫秒
                , anim: 1//弹出动画 类型：Number，0-6 默认：0
                , maxmin: true//窗口最大最小化。
                , btn: ['确定', '关闭']
                , yes: function (index, layero) {
                    //yes - 确定按钮回调方法
                    // 类型：Function，默认：null 该回调携带两个参数，分别为当前层索引index、当前层DOM对象layero。
                    //按钮【按钮一】的回调
                    // let body = layer.getChildFrame('body',index);
                    // let bookName = body.find("input[name=bookName]").val();
                    layer.close(layer.index);
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    //return false; //开启该代码可禁止点击该按钮关闭
                }
                //success - 层弹出后的成功回调方法
                //类型：Function，默认：null
                //success会携带两个参数，分别是当前层DOM layero，当前层索引index。
                , success: function (layero, index) {
                    //layer.getChildFrame(selector, index) - 获取iframe页的DOM
                    let body = layer.getChildFrame('body', index);
                    body.find("input[name=insectId]").val(data.insectId);
                    body.find("input[name=insectName]").val(data.insectName);
                    body.find("input[name=breed]").val(data.breed);
                    body.find("input[name=host]").val(data.host);
                    body.find("input[name=enemy]").val(data.enemy);
                    body.find("input[name=danger]").val(data.danger);
                    body.find("input[name=measures]").val(data.measures);
                    body.find("input[name=larvapic]").val(data.larvaPictures);
                    body.find("input[name=adultpic]").val(data.adultPictures);
                }
            });
        }else if(layEvent === 'delete'){
            layer.confirm("确定要删除吗？",{icon:3,title:'提示'},function (index) {
                $.ajax({
                    type:"get",
                    url:"/MyForestManagerSystem/is.do?method=delete_insect&insectId="+data.insectId,
                    success:function (data) {
                        if(data == "true"){
                            obj.del();
                            layer.alert("删除成功！");
                        }else {
                            layer.alert("删除失败！")
                        }
                    }
                })
                layer.close(index);
            })
       }else if(layEvent === "update"){
            layer.open({
                type:2,
                content:"/MyForestManagerSystem/home/insect_update.html",
                title: '害虫信息更新'
               , area: ['400px', '400px']//宽高
               , shade: [0.8, '#393D49']//遮罩
                , anim: 3//弹出动画 类型：Number，0-6 默认：0
                , maxmin: true//窗口最大最小化。
                , btn: ['确定', '关闭']
                ,yes:function (index,layero) {
                    let body = layer.getChildFrame('body', index);
                    let insectId = body.find("input[name=insectId]").val();
                    let insectName = body.find("input[name=insectName]").val();
                    let breed = body.find("input[name=breed]").val();
                    let host =body.find("input[name=host]").val();
                    let enemy =body.find("input[name=enemy]").val();
                    let danger =body.find("input[name=danger]").val();
                    let measures =body.find("input[name=measures]").val();
                    let larvapic =body.find("input[name=larvapic]").val();
                    let adultpic =body.find("input[name=adultpic]").val();

                    $.ajax({
                        type:"get",
                        url:"/MyForestManagerSystem/is.do?method=update_insect&insectId="+insectId+"&insectName="+insectName+"&breed="+breed+"&host="+host+
                        "&enemy="+enemy+"&danger="+danger+"&measures="+measures+"&larvapic="+larvapic+"&adultpic="+adultpic,
                        success:function (data) {
                            if(data === "true"){
                                //同步更新缓存对应的值
                                obj.update({
                                    insectId:$("input[name=insectId]").val(),
                                    insectName:$("input[name=insectName]").val(),
                                    host:$("input[name=host]").val(),
                                    danger:$("input[name=danger]").val(),
                                    // breed:$("input[name=breed]").val(),
                                    // enemy:$("input[name=enemy]").val(),
                                    // measures:$("input[name=measures]").val(),
                                    // larvapic:$("input[name=larvapic]").val(),
                                    // adultpic:$("input[name=adultpic]").val(),
                                });
                                layer.msg("更新成功")
                            }else{
                                layer.msg("更新失败")
                            }
                        }
                    })
                    layer.close(layer.index);
                }
                ,btn2:function (index,layero) {
                    // layer.close(index);
                }
                ,success:function (layero,index) {
                    let body = layer.getChildFrame('body',index);
                    body.find("input[name=insectId]").val(data.insectId);
                    body.find("input[name=insectName]").val(data.insectName);
                    body.find("input[name=breed]").val(data.breed);
                    body.find("input[name=host]").val(data.host);
                    body.find("input[name=enemy]").val(data.enemy);
                    body.find("input[name=danger]").val(data.danger);
                    body.find("input[name=measures]").val(data.measures);
                    body.find("input[name=larvapic]").val(data.larvaPictures);
                    body.find("input[name=adultpic]").val(data.adultPictures);
                }
            })
       }
    });
   //添加事件，重载表格
    $("#btnAdd").on("click",function () {
        layer.open({
            type: 2 //此处以iframe举例
            , content: '/MyForestManagerSystem/home/insect_add.html'
            , title: '新增害虫信息'
            , area: ['400px', '400px']//宽高
            , shade: [0.8, '#393D49']//遮罩
            //,time:5000//窗口显示时间，自动关闭所需毫秒
            , anim: 5//弹出动画 类型：Number，0-6 默认：0
            , maxmin: true//窗口最大最小化。
            , btn: ['确定', '关闭']
            , yes: function (index, layero) {
                //yes - 确定按钮回调方法
                // 类型：Function，默认：null 该回调携带两个参数，分别为当前层索引index、当前层DOM对象layero。
                //按钮【按钮一】的回调
                let body = layer.getChildFrame('body', index);
                let insectName = body.find("input[name=insectName]").val();
                let breed = body.find("input[name=breed]").val();
                let host =body.find("input[name=host]").val();
                let enemy =body.find("input[name=enemy]").val();
                let danger =body.find("input[name=danger]").val();
                let measures =body.find("input[name=measures]").val();
                let larvapic =body.find("input[name=larvapic]").val();
                let adultpic =body.find("input[name=adultpic]").val();
                $.ajax({
                    type:"get",
                    url: "/MyForestManagerSystem/is.do?method=add_insect" +
                             "&insectName="+insectName+"&breed="+breed+"&host="+host+
                                "&enemy="+enemy+"&danger="+danger+"&measures="+measures+"&larvapic="+larvapic+"&adultpic="+adultpic,
                    success:function (data) {
                        if(data === "true"){
                            t.reload({
                                page: {
                                    curr: 1 //查询后，重新从第 1 页开始
                                }
                            })
                            layer.alert("添加成功");
                        }else {
                            layer.alert("添加失败");
                        }
                    }
                })
                layer.close(layer.index);
            }
            , btn2: function (index, layero) {
                //按钮【按钮二】的回调
                return true; //开启该代码可禁止点击该按钮关闭
            }
        });
    });
    //查询详细
    $("#btnDetail").click(function (obj) {
        layer.alert("你点击了详情");

            let data = obj.data; //获得当前行数据
            layer.alert(data.insectId);



    })
});
</script>
<!--添加操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs " lay-event="update"> 编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"> 删除</a>
</script>
</html>